<template>
	<el-dialog :title="`故障记录(IMEI:${state.queryForm.imei})`" v-model="visible" :close-on-click-modal="false" draggable width="900">
		<el-table
			:data="state.dataList"
			v-loading="state.loading"
			border
			:cell-style="tableStyle.cellStyle"
			:header-cell-style="tableStyle.headerCellStyle"
			:height="420"
			size="small"
		>
			<el-table-column type="index" label="序号" width="60" />
			<el-table-column prop="detailAddress" label="安装点位" show-overflow-tooltip />
			<!-- <el-table-column prop="eventType" label="工单类型" show-overflow-tooltip /> -->
			<el-table-column prop="alarmCauses" label="故障描述" show-overflow-tooltip />
			<!-- <el-table-column prop="declarer" label="申报人" show-overflow-tooltip /> -->
			<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip width="150" />
			<!-- <el-table-column prop="state" label="工单状态" show-overflow-tooltip width="90">
				<template #default="{ row }">
					<el-tag v-if="row.state === 10" type="success">已处理</el-tag>
					<el-tag v-if="row.state === 20" type="warning">处理中</el-tag>
					<el-tag v-if="row.state === 30" type="danger">未处理</el-tag>
				</template>
			</el-table-column> -->
			<el-table-column prop="processingTime" label="最后处理时间" show-overflow-tooltip width="150" />
		</el-table>
		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</el-dialog>
</template>

<script setup lang="ts" name="systemBasicDeviceFaultRecord">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchList } from '/@/api/alarm/alarmFaultLogging';
// 定义查询字典

// 定义变量内容
const dataFormRef = ref();
// 搜索变量
const visible = ref(false);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
	createdIsNeed: false,
	pagination: {
		small: true,
	},
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 打开弹窗
const openDialog = (imei: string) => {
	visible.value = true;
	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
	// 获取basicDevice信息
	if (imei) {
		state.queryForm.imei = imei;
		getDataList();
	}
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
